01. Responding to Screen Capability & View

INSTRUCTOR NOTE:

Before you start implementing responsive images, consider doing an image audit of your site:

• What is the production workflow for images?
• Do you use hero images, thumbnails, icons, decorations?
• What image formats are used on your site?
• Should some images be inlined or delivered as SVGs?

For more information, see Jason Grigsby's article Responsive Image Audits.

Pro tip: to get the maximum bang-for-your-buck when optimizing your site, focus on very large images. Pick the ten largest!

In particular, resizing images in CSS or HTML can be a huge problem for big images. For example: you need a 1000x1000px image file to display in a 500x500px img element on a 2x screen. If you use a 1100x1100px image, that's 100 x 100 = 10,000 wasted pixels!